import React, { useEffect } from 'react';

import G6 from '@antv/g6';
import { data } from './data';

const WorkFlow = () => {
  useEffect(() => {
    const container = document.getElementById('mountNode');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
      container: 'mountNode',
      width,
      height,
      // fitCenter: true,
      layout: {
        type: 'dagre',
        nodesepFunc: (d) => {
          if (d.id === '3') {
            return 500;
          }
          return 50;
        },
        ranksep: 70,
        controlPoints: true,
      },
      defaultNode: {
        type: 'modelRect',
        size: [270, 80],
        style: {
          radius: 5,
          stroke: '#69c0ff',
          fill: '#ffffff',
          lineWidth: 1,
          fillOpacity: 1,
        },
        // label configurations
        labelCfg: {
          style: {
            fill: '#595959',
            fontSize: 14,
          },
          offset: 30,
        },
        // left rect
        preRect: {
          show: true,
          width: 4,
          fill: '#40a9ff',
          radius: 2,
        },
        // configurations for the four linkpoints
        linkPoints: {
          top: true,
          // right: true,
          bottom: true,
          // left: true,
          // the size of the linkpoints' circle
          size: 10,
          lineWidth: 1,
          fill: '#72CC4A',
          stroke: '#72CC4A',
        },
        // configurations for the icon
        logoIcon: {
          // whether to show the icon
          show: true,
          x: 0,
          y: 0,
          // the image url for the icon, string type
          img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
          width: 16,
          height: 16,
          // adjust the offset along x-axis for the icon
          offset: 0,
        },
        // configurations for state icon
        stateIcon: {
          // whether to show the icon
          show: true,
          x: 0,
          y: 0,
          // the image url for the icon, string type
          img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
          width: 16,
          height: 16,
          // adjust hte offset along x-axis for the icon
          offset: -5,
        },
      },
      defaultEdge: {
        type: 'polyline',
        style: {
          radius: 20,
          offset: 45,
          endArrow: true,
          lineWidth: 2,
          stroke: '#C2C8D5',
        },
      },
      nodeStateStyles: {
        selected: {
          stroke: '#d9d9d9',
          fill: '#5394ef',
        },
      },
      modes: {
        default: [
          'drag-canvas',
          'drag-node',
          'zoom-canvas',
          'click-select',
          {
            type: 'tooltip',
            formatText(model) {
              console.log(model);
              const cfg = model.conf;
              const text = [];
              cfg.forEach((row) => {
                text.push(row.label + ':' + row.value + '<br>');
              });
              return text.join('\n');
            },
            offset: 30,
          },
        ],
      },
      fitView: true,
    });

    graph.addItem('edge', {
      source: '1',
      target: { x: 1, y: 2 },
      sourceAnchor: 0,
      // targetAnchor: anchorIndex,
    });

    graph.data(data); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图
  }, []);
  return <div id="mountNode"></div>;
};

export default WorkFlow;
